import React, { useEffect } from "react"
import { useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";


export const ChatBlock: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
    const { token } = useSelector((state: any) => {
        return state.user.value;
    })


    const location = useLocation();
    const navigate = useNavigate();

    
    useEffect(() => {
        if (!token) {
            navigate("/login")
        } else {
            if (location.pathname == "/") {
                navigate("/chat")
            }
        }
    }, [])

    
    return <div className="bg-[#F4F9FD] w-full h-full min-h-screen text-center flex justify-center items-center">
        <div className='flex flex-col w-[1150px] h-[790px] bg-white rounded-[24px] overflow-hidden shadow-lg'>
            <div className='flex-1 flex flex-row'>
                {children}
            </div>
        </div>
    </div>
}